<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function get(){
            /**
             * 获取元素
             */ 
            var obj = document.getElementById('d1') // 返回DOM对象
            // console.log(obj, typeof obj)

            // var hobbies = document.getElementsByName('hobbies')
            // // console.log(hobbies)
            // for(var hobby of hobbies){
            //     console.log(hobby)
            // }

            // var objs = document.getElementsByTagName('div')
            // console.log(objs)

            /**
             * 访问属性
             */ 
            // console.log(obj.title)
            // console.log(obj.id)
            // obj.title = '南京欢迎您'

            // var username = document.getElementById('username')
            // console.log(username.value) // 取值
            // username.value = '汤小洋' // 赋值

            var male = document.getElementById('male')
            // console.log(male.checked) // true选中或false未选中
            // male.checked = false

            var female = document.getElementById('female')
            female.checked = true


        }
    </script>
</head>
<body>
    <input type="button" value="获取页面中的元素" onclick="get()">
    <hr>

    <div id="d1" title="嘿嘿嘿嘿">hello</div>
    <div>wolrd</div>
    <p>welcome</p>

    爱好：<input type="checkbox" value="eat" name="hobbies"> 吃饭
        <input type="checkbox" value="sleep" name="hobbies" checked> 睡觉
        <input type="checkbox" value="doudou" name="hobbies"> 打豆豆 <br>
    
    用户名：<input type="text" id="username" value="aaa"> <br>
    性别：<input type="radio" name="sex" value="male" checked id="male">男
        <input type="radio" name="sex" value="female" id="female">女 <br>
</body>
</html>